<style lang="stylus" scoped>
  @import '../common/stylus/index.styl'
  .goods
    .main
      position absolute
      top 174px
      bottom 45px
      display flex
      overflow hidden
      .left
        flex 0 0 80px
        width 80px
        background #f3f5f7
        .good
          height 54px
          width 80px
          display table
          line-height 14px
          &.active
            background #fff
          .icon
            display inline-block
            width 12px
            height 12px
            margin-right 4px
            &.decrease
              bgImg('decrease_3')
            &.discount
              bgImg('discount_3')
            &.guarantee
              bgImg('guarantee_3')
            &.invoice
              bgImg('invoice_3')
            &.special
              bgImg('special_3')   
          .name
            display table-cell
            vertical-align middle
            width 56px
            height 54px
            padding 0 12px
            font-size 12px
            color #757575
            font-weight 200
            borderbotton(rgba(7,17,27,0.1))
      .right
        flex 1
        h1
          height 26px
          background #f3f5f7
          line-height 26px
          font-size 12px
          color rgb(147,153,159)
          padding-left 14px
          border-left 1px solid #d9dde1
        .myli
          borderbotton(rgba(7,17,27,0.1))
          &:last-of-type:after
            border-bottom none
    .car
      position absolute
      bottom 0
    .carlist
      position absolute
      bottom 45px
      top 0
      background rgba(7,17,27,0.6)
</style>

<template>
  <div class="goods">
    <div class="main">
      <div class="left" ref="leftwrapper">
        <ul>
          <li class="good" :key="index" v-for="(good,index) in goods" :class="{active:theindex == index}" @click="change(index)">
              <span class="name"><span v-show="iconclass[good.type]" class="icon" :class="iconclass[good.type]"></span>{{good.name}}</span>
          </li>
        </ul>
      </div>
      <div class="right" ref="rightwrapper">
        <ul >
          <li :key="index" v-for="(good,index) in goods" ref="rightitem">
            <h1>{{good.name}}</h1>
            <ul>
              <my-li class="myli" :seller="seller" :goods="goods" :food="food" :key="index" v-for="(food,index) in good.foods"></my-li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
    <carlist v-on:iscarlist="iscarlist" :carlist="carlist" v-show="carlist" class="carlist" :goods="goods"></carlist>
    <Car v-on:iscarlist="iscarlist" :seller="seller" :goods="goods" class="car" ref="child"></Car>
  </div>
</template>

<script>
import Li from '../components/li'
import carlist from '../components/carlist'
import Car from '../components/car'
import BScroll from 'better-scroll'
export default {
  data () {
    return {
      iconclass:['decrease','discount','special','invoice','guarantee'],
      goods: [],
      theindex:0,
      seller:{},
      carlist:false
    }
  },
  components: {
    'my-li':Li,
    'Car':Car,
    'carlist':carlist
  },
  created () {
    if(this.$route.params.goods){
      this.goods = this.$route.params.goods
      this.$nextTick(() => {
        this.initscroll()
      })
    }else{
      this.$http.get('/api/goods').then((response) => {
        this.goods = response.data
        this.$nextTick(() => {
          this.initscroll()
        })
      })
    }
    this.$http.get('/api/sellers').then((response) => {
      this.seller = response.data
    })
  },
  methods: {
    initscroll () {
      this.onescroll = new BScroll(this.$refs.leftwrapper, {
        click:true
      })
      this.twoscroll = new BScroll(this.$refs.rightwrapper, {
        probeType:3,
        click:true
      })
      console.log()
      this.rightList = []
      let height = 0
      this.rightList.push(height)
      for(let i = 0;i < this.$refs.rightitem.length;i++){
        height += this.$refs.rightitem[i].offsetHeight
        this.rightList.push(height)
      }
      this.twoscroll.on("scroll",this.rightScroll)
    },
    rightScroll (e) {
      let H = Math.abs(e.y)
      for(let i = 0;i< this.rightList.length;i++){
        let one = this.rightList[i]
        let two = this.rightList[i+1]
        if(H >= one && H <= two){
          return this.theindex = i
        }
      }
      return 0
    },
    change(index){
      console.log(this.theindex,index)
      this.theindex = index
      console.log(this.theindex,index)
      this.twoscroll.scrollTo(0,-this.rightList[index] -1,300)

    },
    iscarlist(num){
      !num ? this.carlist = false : this.carlist = !this.carlist
    },
    animate(X,Y) {
      this.$refs.child.animate(X,Y)
    }
  }
}
</script>

